<template>
  <div class="approval-passed-page">
    <div class="wrap">
      <!-- 顶部步骤条 -->
      <StepBar :steps="steps" :current-step="6" />

      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <el-loading-directive v-loading="loading" text="正在加载审批通过数据...">
          <div style="height: 200px;"></div>
        </el-loading-directive>
      </div>

      <!-- 内容区域 -->
      <div v-else class="content">
        <!-- 左侧：基本信息、申请信息 -->
        <div class="left">
          <div class="card">
            <div class="card-title">基本信息</div>
            <el-descriptions :column="2" border label-class-name="desc-label" class="desc">
              <el-descriptions-item label="单据编号">{{ formData.elderlyNo }}</el-descriptions-item>
              <el-descriptions-item label="老人姓名">{{ formData.elderlyName }}</el-descriptions-item>
              <el-descriptions-item label="老人身份证号">{{ formData.elderlyIdCard }}</el-descriptions-item>
              <el-descriptions-item label="联系方式">{{ formData.contact }}</el-descriptions-item>
              <el-descriptions-item label="费用期限">{{ formData.feePeriod }}</el-descriptions-item>
              <el-descriptions-item label="护理等级">{{ formData.careLevel }}</el-descriptions-item>
              <el-descriptions-item label="入住床位">{{ formData.bedNumber }}</el-descriptions-item>
              <el-descriptions-item label="签约合同">
                {{ formData.contract }}
                <el-button link type="primary" size="small" style="margin-left: 8px" @click="viewContract">查看</el-button>
              </el-descriptions-item>
              <el-descriptions-item label="养老顾问">{{ formData.consultant }}</el-descriptions-item>
              <el-descriptions-item label="护理员">{{ formData.caregiver }}</el-descriptions-item>
            </el-descriptions>
          </div>

          <div class="card">
            <div class="card-title">申请信息</div>
            <el-descriptions :column="2" border label-class-name="desc-label" class="desc">
              <el-descriptions-item label="退住日期">{{ formData.checkoutDate }}</el-descriptions-item>
              <el-descriptions-item label="退住原因">{{ formData.checkoutReason }}</el-descriptions-item>
              <el-descriptions-item label="备注" :span="2">
                {{ formData.remark || '已和家属沟通过，若高龄先生回归后，将重新办理入住' }}
              </el-descriptions-item>
              <el-descriptions-item label="申请人">{{ formData.applicantName || '顾廷烨' }}</el-descriptions-item>
              <el-descriptions-item label="申请时间">{{ formData.submitTime || '2048-10-05 15:00:00' }}</el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 解除记录 -->
          <div class="card">
            <div class="card-title">解除记录</div>
            <el-descriptions :column="2" border label-class-name="desc-label" class="desc">
              <el-descriptions-item label="提交人">{{ formData.terminationSubmitter || '顾廷烨' }}</el-descriptions-item>
              <el-descriptions-item label="解除日期">{{ formData.terminationDate || '2024-05-05' }}</el-descriptions-item>
              <el-descriptions-item label="解除协议" :span="2">
                {{ formData.terminationAgreement || '高启强解除协议.pdf' }}
                <el-button link type="primary" size="small" style="margin-left: 8px" @click="viewTerminationAgreement">查看</el-button>
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 完成账单清算 -->
          <div class="card">
            <div class="card-title">完成账单清算</div>
            
            <!-- 退款信息 -->
            <div class="refund-section">
              <h4 class="section-subtitle">退款信息</h4>
              <el-descriptions :column="1" border label-class-name="desc-label" class="desc">
                <el-descriptions-item label="剩余预缴款">2000.00元</el-descriptions-item>
              </el-descriptions>
            </div>

            <!-- 退款凭证 -->
            <div class="refund-voucher-section">
              <h4 class="section-subtitle">退款凭证</h4>
              <el-descriptions :column="2" border label-class-name="desc-label" class="desc">
                <el-descriptions-item label="提交人">顾廷烨</el-descriptions-item>
                <el-descriptions-item label="提交时间">2022-10-05 15:00:00</el-descriptions-item>
                <el-descriptions-item label="退款方式">现金</el-descriptions-item>
                <el-descriptions-item label="退款凭证" :span="1">
                  <div class="voucher-image">
                    <div class="voucher-placeholder">
                      <el-icon size="24" color="#999">
                        <Document />
                      </el-icon>
                      <span>退款凭证</span>
                    </div>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="退款备注" :span="2">
                  共退款5520.00元，现金退款，已结清。
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>

        <!-- 右侧：操作记录 -->
        <div class="right">
          <div class="card">
            <div class="card-title">操作记录</div>
            <div class="timeline">
              <div class="timeline-item">
                <div class="timeline-icon success">✓</div>
                <div class="timeline-content">
                  <div class="timeline-header">
                    <div class="timeline-title">护理员a发起申请</div>
                    <div class="timeline-date">{{ formData.submitTime || '2048-10-15 09:00:00' }}</div>
                  </div>
                  <div class="timeline-user">
                    护理员a
                    <el-tag size="small" type="success">已发起</el-tag>
                  </div>
                </div>
              </div>
              <div class="timeline-item">
                <div class="timeline-icon success">✓</div>
                <div class="timeline-content">
                  <div class="timeline-header">
                    <div class="timeline-title">(待处理) 审批-申请审批</div>
                    <div class="timeline-date">2048-10-15 09:00:00</div>
                  </div>
                  <div class="timeline-user">
                    退住审批员
                    <el-tag size="small" type="success">已通过</el-tag>
                  </div>
                  <div class="timeline-action">
                    <el-button type="primary" link @click="handleViewDetail">这是当前审批处</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部操作按钮 -->
      <div class="bottom-actions">
        <el-button @click="handleBack">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Document } from '@element-plus/icons-vue'
import StepBar from '@/components/StepBar/index.vue'
import { getApprovalPassedData } from '@/api/system/out_management'

const router = useRouter()
const route = useRoute()

// 步骤条数据
const steps = ['申请退住', '申请审批', '解除合同', '调整账单', '账单审批', '退住审批', '费用清算']

// 动态数据
const formData = ref({
  elderlyNo: '',
  elderlyName: '',
  elderlyIdCard: '',
  contact: '',
  feePeriod: '',
  careLevel: '',
  bedNumber: '',
  contract: '',
  consultant: '',
  caregiver: '',
  checkoutDate: '',
  checkoutReason: '',
  remark: '',
  applicantName: '',
  submitTime: '',
  // 解除记录相关字段
  terminationSubmitter: '',
  terminationDate: '',
  terminationAgreement: ''
})

// 加载状态
const loading = ref(true)

// 页面加载时根据业务ID动态查询数据
onMounted(async () => {
  console.log('=== 审批通过页面加载开始 ===')
  console.log('URL参数:', route.query)
  
  const businessId = route.query.id
  console.log('业务ID:', businessId)
  
  if (businessId) {
    try {
      console.log('开始查询审批通过数据...')
      loading.value = true
      
      // 调用API获取审批通过数据
      const response = await getApprovalPassedData(businessId)
      console.log('API响应:', response)
      
      if (response.code === 200 && response.data) {
        const data = response.data
        console.log('获取到的数据:', data)
        
        // 更新表单数据
        formData.value = {
          elderlyNo: data.checkOutNo || '',
          elderlyName: data.elderly?.name || '',
          elderlyIdCard: data.elderly?.idCard || '',
          contact: data.elderly?.contact || '',
          // ✅ 修复：使用正确的费用期限字段
          feePeriod: (data.feeStartDate && data.feeEndDate) ? 
            `${data.feeStartDate} - ${data.feeEndDate}` : 
            (data.elderly?.feeStartDate && data.elderly?.feeEndDate) ? 
            `${data.elderly.feeStartDate} - ${data.elderly.feeEndDate}` : '未知费用期限',
          careLevel: data.careLevel || '',
          bedNumber: data.bedNumber || '',
          contract: data.contractName || '',
          // ✅ 修复：使用caregiverName字段（养老顾问和护理员使用同一个字段）
          consultant: data.caregiverName || '',
          caregiver: data.caregiverName || '',
          checkoutDate: data.checkOutDate || '',
          checkoutReason: data.checkOutReason || '',
          remark: data.remark || '',
          applicantName: data.creatorName || '',
          submitTime: data.createTime || '',
          // 解除记录数据
          terminationSubmitter: data.terminationSubmitter || '',
          terminationDate: data.terminationDate || '',
          terminationAgreement: data.terminationAgreement || ''
        }
        
        console.log('更新后的formData:', formData.value)
        ElMessage.success('数据加载成功')
      } else {
        console.error('API返回错误:', response.msg)
        ElMessage.error('数据加载失败：' + (response.msg || '未知错误'))
      }
    } catch (error) {
      console.error('查询审批通过数据失败:', error)
      ElMessage.error('数据加载失败：' + (error.message || '网络错误'))
    } finally {
      loading.value = false
    }
  } else {
    console.log('没有业务ID参数，使用默认数据')
    ElMessage.warning('缺少业务ID参数')
    loading.value = false
  }
  
  console.log('=== 审批通过页面加载完成 ===')
})

// 查看合同
const viewContract = () => {
  ElMessage.info('查看合同文件：高启强长住合同.pdf')
}

// 查看解除协议
const viewTerminationAgreement = () => {
  ElMessage.info('查看解除协议文件：高启强解除协议.pdf')
}

// 查看详情 - 跳转到解除合同页面
const handleViewDetail = () => {
  router.push('/splccs/jcht')
}

// 返回
const handleBack = () => {
  router.back()
}
</script>

<style scoped lang="scss">
.approval-passed-page {
  min-height: 100%;
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 50%, #fffde7 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;

  // 装饰性背景元素
  &::before,
  &::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.3;
    pointer-events: none;
  }

  &::before {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(205, 220, 57, 0.3) 0%, transparent 70%);
    top: 100px;
    left: 10%;
  }

  &::after {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(139, 195, 74, 0.25) 0%, transparent 70%);
    top: 200px;
    right: 15%;
  }
}

.wrap {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* 内容区域 */
.content {
  display: grid;
  grid-template-columns: 1fr 450px;
  gap: 20px;
  margin-bottom: 20px;
}

.left,
.right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
}

/* 描述列表样式 */
:deep(.desc) {
  .desc-label {
    background: #fafafa;
    color: #666;
    font-weight: normal;
    text-align: right;
  }
}

/* 时间轴样式 */
.timeline {
  .timeline-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    position: relative;

    &:last-child {
      margin-bottom: 0;
    }

    &:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 21px;
      top: 45px;
      bottom: -25px;
      width: 2px;
      background: #e0e0e0;
    }
  }

  .timeline-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    flex-shrink: 0;

    &.success {
      background: #67c23a;
    }

    &.pending {
      background: #409eff;
    }
  }

  .timeline-content {
    flex: 1;
    padding-top: 2px;
  }

  .timeline-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    align-items: center;
  }

  .timeline-title {
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }

  .timeline-date {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
  }

  .timeline-user {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .timeline-action {
    margin-top: 8px;
  }
}

/* 底部按钮 */
.bottom-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* 子标题样式 */
.section-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 20px 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
}

/* 退款信息区域 */
.refund-section {
  margin-bottom: 20px;
}

/* 退款凭证区域 */
.refund-voucher-section {
  margin-top: 20px;
}

/* 凭证图片样式 */
.voucher-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fafafa;
}

.voucher-img {
  max-width: 120px;
  max-height: 80px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 凭证占位符样式 */
.voucher-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #999;
  font-size: 12px;
  gap: 8px;
}

.voucher-placeholder span {
  font-size: 12px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .content {
    grid-template-columns: 1fr;
  }
}
</style>

